<template>
  <div>
    我是Admeo
    {{ aState.aList }}
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, watchEffect, watch } from 'vue'

export default defineComponent({
  props: ['list', 'msg', 'title'],
  setup(props, context) {
    const aState = reactive({
      aList: props.list || []
    })
    // 通过watchEffect解决异步数据获取问题
    // watchEffect(() => {
    //   console.log('watchEffect: ', props.list)
    //   aState.aList = props.list
    // })

    // // watch监听单一数据源，使用函数形式
    // watch(
    //   () => props.list,
    //   (v) => {
    //     // console.log('v:', v)
    //     // aState.aList = v
    //   }
    // )

    watchEffect(() => {
      console.log('watchEffect:list:----->', props.list)
    })

    // watch第一次不会执行，只有这个数据改变后才能监听到
    watch(
      () => props.title,
      (title) => {
        console.log('--------------------------watch-----------------title')
        console.log('watch:title:----->', title)
      }
    )

    return { aState }
  }
})
</script>
